<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <title>旅游网站登录页</title>
    
</head>

<body>
    <!-- 标题 -->
<header>
    <div class="container-fluid">
      
      <nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
        <a class="navbar-brand" href="index.html"><img src="./img/logo1.png" alt="" style="width: 100px;"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
          <span class="navbar-toggler-icon"></span>
        </button>
         
          <!-- Navbar links -->
          <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link" href="index.html">首页</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="jingguan1.html">热门城市</a>
                </li> 
                <li class="nav-item">
                  <a class="nav-link" href="4.0.html">热门景点</a>
                </li>
            </ul>
            <div class="btn-group">
              <a href="login.html" class="btn btn-outline-light">登录</a>
          </div>
          </div>  
      </nav>
    </div>
</header>
<br><br><br><br>
    <div class="container">
        <div class="row">
            
            <div class="col-md-12">
                <div class="row card-bg mt-5">
                    <!-- 右上角切换注册三角形按钮 -->
                    <a href="./register.html">
                        <img class="switch-btn" src="./img/switch-botton.svg" />
                        <span class="switch-btn-text">注册</span>
                    </a>
                    <!-- 扫码登录 -->
                    <div class="col-6 qr-code-login d-none d-sm-block">
                        <div class="qr-code-title">扫码登录</div>
                        <img src="./img/qr-code.png" class="qr-code" />
                        <div>
                            <span class="gray-text">使用</span>微信/QQ
                        </div>
                        
                    </div>
                    <!-- 账号与短信登录 -->
                    <div class="col-sm-6 account-login">
                        <div class="btn-group" role="tablist">
                            <button class="btn btn-outline-light active" type="button" data-toggle="pill" data-target="#account">账号登录</button>
                            <button class="btn btn-outline-light" type="button" data-toggle="pill" data-target="#msg">短信登录</button>
                        </div>
                       

                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div id="account" class="container tab-pane active">
                                <br />
                                <form action="./register.jsp" class="needs-validation" novalidate>
                                    <div class="form-group">
                                        <!--required表示必填-->
                                        <input type="text" class="form-control" placeholder="输入登录名" required />
                                        <!--invalid-feedback验证输入是否正确-->
                                        <div class="invalid-feedback">请输入登录名</div>
                                    </div>
                                    <br>
                                    <div class="form-group">
                                        <input type="password" class="form-control" placeholder="输入登录密码" required />
                                        <div class="invalid-feedback">请输入登录密码</div>
                                    </div>
                                    <br><br>
                                    <!--btn-outline-light使按钮具有边框，但保持文本和背景颜色为默认值。-->
                                    <button type="submit" class="btn mt-5 btn-outline-light">登录</button>
                                </form>
                                <div class="login-links">
                                    <!--target="_blank"）在新标签页中打开。-->
                                    <a href="#" target="_blank">忘记账号名</a>
                                    <a href="#" target="_blank">找回密码</a>
                                </div>
                            </div>
                            <div id="msg" class="container tab-pane">
                                <br />
                                <!--needs-validation：表示表单需要验证
                                novalidate：表示表单不需要验证-->
                                <form action="./register.jsp" class="needs-validation" novalidate>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">+86</span>
                                        </div>
                                        <input type="text" class="form-control form-group-input" placeholder="请输入手机号"
                                            required id="phone"
                                            pattern="(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}" />
                                            <!--验证手机号是否正确-->
                                        <div class="invalid-feedback">请输入正确的手机号</div>
                                    </div>

                                    <div class="input-group">
                                        <input type="text" class="form-control" placeholder="请输入验证码" required />
                                        <div class="input-group-prepend">
                                             <!-- 手机号校验通过才可发送验证码 -->
                                            <button class="btn get-verification-code-btn btn-outline-light">
                                                获取校验码
                                            </button>
                                        </div>
                                        <div class="invalid-feedback">请输入短信验证码</div>
                                    </div>
                                    <label for="policy" class="form-check-label checkbox-text mt-5 ml-3">
                                        <input type="checkbox" class="form-check-input" value="agree" id="policy"
                                            required />
                                        登录即视为您已阅读并同意<a
                                            href="#"
                                            class="link link-orange">服务条款</a>、<a
                                            href="#"
                                            class="link link-orange">隐私政策</a>
                                        <div class="invalid-feedback">请阅读并同意协议</div>
                                    </label>

                                    <button type="submit" class="btn mt-1 btn-outline-light">登录</button>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 policy-text gray-text">
                        登录视为您已同意<a class="gray-text link"
                            href="#">第三方账号绑定协议、服务条款、隐私政策</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br><br><br>
<!-- 底部导航栏 -->
<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-bottom">
    <input type="button" onclick="myFunction1()" class=" text-center btn btn-dark" style="width: 25%;" value="关于我们" />
    <input type="button" onclick="myFunction2()" class=" text-center btn btn-dark" style="width: 25%;" value="联系方式" />
    <input type="button" onclick="myFunction3()" class=" text-center btn btn-dark" style="width: 25%;" value="旗下网站" />
    <input type="button" onclick="myFunction4()" class=" text-center btn btn-dark" style="width: 25%;" value="特别致谢" />
</nav>
    
</body>
<script>
    // 当点击获取验证码按钮时，检查手机号码是否有效，有效则弹出提示框显示验证码已发送
    $(".get-verification-code-btn").click(function () {
        if (document.getElementById("phone").checkValidity()) {
            alert("验证码已发送");
        }
    });
    // 当页面加载时，为所有具有 needs-validation 类的表单添加提交事件监听器
    (function () {
        "use strict";
        window.addEventListener(
            "load",
            function () {
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.getElementsByClassName("needs-validation");
                // Loop over them and prevent submission
                var validation = Array.prototype.filter.call(forms, function (form) {
                    form.addEventListener(
                        "submit",
                        function (event) {
                            if (form.checkValidity() === false) {
                                event.preventDefault();
                                event.stopPropagation();
                            }
                            form.classList.add("was-validated");
                        },
                        false
                    );
                });
            },
            false
        );
    })();
    function myFunction1(){
    alert("由第15组成员制作");
  }
  function myFunction2(){
    alert("email：1796745716@qq.com");
  }
  function myFunction3(){
    alert("暂时没有");
  }
  function myFunction4(){
    alert("www.baidu.com");
  }
</script>

</html>